<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01控制字体大小</title>
    <style type="text/css">
        div{
            margin: 20px auto;
            width: 400px;
            height: 200px;
            background-color: #dddddd;
        }
        input{
            margin-left: 20px;
            margin-top: 20px;
            font-size: 20px;
        }
        #content{
            font-size: 16px;
            margin-top: 20px;
            margin-left: 20px;
        }
    </style>
    <script type="text/javascript">
        var content;
        window.onload = function () {
            content = document.getElementById("content");
            var max = document.getElementById("maxFont");
            var middle = document.getElementById("middleFont");
            var min = document.getElementById("minFont");
            max.onclick = getMaxFont;
            middle.onclick = getMiddleFont;
            min.onclick = getMinFont;
        }
        
        function getMaxFont() {
            content.style.fontSize = '20px';
        }
        function getMiddleFont() {
            content.style.fontSize = '16px';
        }
        function getMinFont() {
            content.style.fontSize ='12px';
        }
    </script>
</head>
<body>
<div>
    <input id="maxFont" type="button" value="大号字体"/>
    <input id="middleFont" type="button" value="中号字体"/>
    <input id="minFont" type="button" value="小号字体"/><br/>
    <p id="content">Hello world! My name is China!</p>
</div>
</body>
</html>